import 'package:flutter/material.dart';
import '../theme/app_theme.dart';
import '../services/app_state_provider.dart';
import 'minimalist_mode_screen.dart';

class MinimalistModeIntroScreen extends StatefulWidget {
  const MinimalistModeIntroScreen({super.key});

  @override
  State<MinimalistModeIntroScreen> createState() =>
      MinimalistModeIntroScreenState();
}

class MinimalistModeIntroScreenState extends State<MinimalistModeIntroScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final appState = AppStateProvider.of(context);
    return Scaffold(
      backgroundColor: AppTheme.white,
      appBar: AppBar(
        backgroundColor: AppTheme.white,
        elevation: 0,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.pop(context);
          },
          color: AppTheme.textPrimary,
        ),
        title: const Text(
          '极简模式',
          style: TextStyle(
            fontSize: 18,
            fontWeight: FontWeight.bold,
            color: AppTheme.textPrimary,
          ),
        ),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              
              _buildIntroSection(),

              
              Container(
                padding: const EdgeInsets.all(20),
                child: Column(
                  children: [
                    Text(
                        appState.isMinimalistMode
                            ? '极简模式已开启'
                            : '开启极简模式，享受更简洁的使用体验',
                        textAlign: TextAlign.center,
                        style: const TextStyle(
                          fontSize: 16,
                          color: AppTheme.textPrimary,
                        )),
                    const SizedBox(height: 20),
                    ElevatedButton(
                      onPressed: () async {
                        if (appState.isMinimalistMode) {
                          
                          await appState.setMinimalistMode(false);
                          
                          if (mounted) {
                            Navigator.pop(context);
                          }
                        } else {
                          
                          await appState.setMinimalistMode(true);
                          
                          if (mounted) {
                            Navigator.pushReplacement(
                              context,
                              MaterialPageRoute(
                                  builder: (context) =>
                                      const MinimalistModeScreen()),
                            );
                          }
                        }
                      },
                      style: ElevatedButton.styleFrom(
                        backgroundColor: AppTheme.primaryColor,
                        minimumSize: const Size(double.infinity, 50),
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(25),
                        ),
                      ),
                      child: Text(
                        appState.isMinimalistMode ? '退出极简模式' : '开启极简模式',
                        style: const TextStyle(
                          fontSize: 18,
                          color: AppTheme.white,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildIntroSection() {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: const BoxDecoration(
        color: AppTheme.background,
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(20),
          bottomRight: Radius.circular(20),
        ),
      ),
      child: Column(
        children: [
          
          Container(
            height: 200,
            margin: const EdgeInsets.only(bottom: 20),
            decoration: BoxDecoration(
              color: AppTheme.white,
              borderRadius: BorderRadius.circular(12),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withValues(alpha: 0.1),
                  blurRadius: 10,
                  offset: const Offset(0, 5),
                ),
              ],
            ),
            child: const Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  '极简模式预览',
                  style: TextStyle(
                    fontSize: 18,
                    fontWeight: FontWeight.bold,
                    color: AppTheme.primaryColor,
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  '简洁界面 · 核心功能 · 专注体验',
                  style: TextStyle(
                    fontSize: 14,
                    color: AppTheme.textSecondary,
                  ),
                ),
              ],
            ),
          ),

          
          _buildFeatureItem(
            '简洁界面',
            '去除冗余信息，专注核心功能，给你清爽的使用体验',
          ),
          _buildFeatureItem(
            '核心功能保留',
            '保留经期记录、预测、健康提醒等核心功能',
          ),
          _buildFeatureItem(
            '低能耗设计',
            '优化性能，降低电量消耗，延长使用时间',
          ),
          _buildFeatureItem(
            '适合专注场景',
            '学习、工作等需要专注的场景下使用更合适',
          ),
        ],
      ),
    );
  }

  Widget _buildFeatureItem(String title, String description) {
    return Container(
      margin: const EdgeInsets.only(bottom: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.bold,
              color: AppTheme.textPrimary,
            ),
          ),
          const SizedBox(height: 8),
          Text(description,
              style: const TextStyle(
                fontSize: 14,
                color: AppTheme.textSecondary,
                height: 1.6,
              )),
        ],
      ),
    );
  }
}
